<template>
  <div>
    <v-header></v-header>
    <div class="login-wrap">
      <div class="login-content">
        <div class="login-weixin">
          <div class="title">彩云拍登录</div>
          <div class="login-rw">
            <div class="wrp_code">
              <img class="qrcode" :src="image" v-if="image">
              <img class="qrcode" src="../../assets/img/notfound.jpg" v-else>
            </div>
            <div class="info">
              <div>
                <p>请使用微信扫描二维码登录</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from '../../components/common/Header.vue'
import axios from 'axios'
import { constants } from 'fs'
import { clearInterval, setTimeout } from 'timers'
export default {
  name: 'login',
  components: {
    'v-header': vHead
  },
  data() {
    return {
      qrcode: '',
      image: '',
      timerId: null
    }
  },
  created() {
    this.getQrCode()
  },
  methods: {
    getQrCode() {
      axios
        .get('/partner/signIn/getQrCode')
        .then(res => {
          if (res.data && res.data.data) {
            this.qrcode = res.data.data.code
            this.image = res.data.data.image
            console.log('store=>', this.$store)
            this.$store.dispatch('checkSignStatus', {
              timerId: this.timerId,
              qrcode: this.qrcode
            })
          }
          console.log('qrcode=>', this.qrcode)
        })
        .catch(error => {
          console.log(error)
        })
    },
    clearTimer() {
      clearTimeout(this.timerId)
    }
  },
  beforeDestroy() {
    if (this.timerId) {
      this.clearTimer()
    }
  }
}
</script>

<style>
.login-wrap {
  width: 1024px;
  margin: 1.875rem auto;
  height: 780px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 7px 0 rgba(39, 54, 78, 0.08);
  position: relative;
}
.login-content {
  width: 300px;
  height: 400px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  margin: -200px -150px;
}
.wrp_code {
  width: 280px;
  margin: 15px auto;
  border: 1px solid #e2e2e2;
}
.wrp_code img {
  height: 280px;
}
.login-weixin {
  text-align: center;
  padding: 10px;
}
</style>
